import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Alert from 'src/component/Alert';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
import { Ui } from 'src/constant/Env';
import { Severity } from 'src/constant/Notification';
import { Page } from 'src/constant/Page';
// import { PostWithdrawalResponse } from 'src/model/Api';
// import { WithdrawalVeriyfyForm } from 'src/model/Form';
import { openSnackbar } from 'src/redux/uiSlice';
// import { resendWithdrawalVerify, verifyWithdrawal } from 'src/service/propertyService';
import style from './VerifyModal.module.scss';

type PostWithdrawalResponse = any
type WithdrawalVeriyfyForm = any

type Props = {
  open: boolean;
  onClose: () => void;
  withdrawalData?: PostWithdrawalResponse;
};

const VerifyModal = ({ open, onClose, withdrawalData }: Props) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const methods = useForm<WithdrawalVeriyfyForm>();

  const onSubmit = (data: WithdrawalVeriyfyForm) => {
    if (!withdrawalData) return;
    // verifyWithdrawal(withdrawalData.id, data.code)
    //   .then(() => {
    //     onClose();
    //     methods.reset();
    //     navigate(Ui === 'admin' ? `${Page.UserAdmin}/withdrawal/success` : Page.WithdrawalSuccess, {
    //       replace: true,
    //       state: { userId: withdrawalData.userId },
    //     });
    //   })
    //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
  };

  const onResend = () => {
    if (!withdrawalData) return;
    // resendWithdrawalVerify(withdrawalData.id).catch((e) =>
    //   dispatch(openSnackbar({ message: e, severity: 'alert' })),
    // );
  };

  return (
    <Modal open={open} handleClose={onClose}>
      <div>
        <div className={style.heading}>{"提领验证"}</div>
        <div>{"提领验证码已寄送至您的 Email 地址"}</div>
        <Form methods={methods} onSubmit={onSubmit} className={style.form}>
          <FormInput label="提领验证码" name="code" autoFocus />
          <Alert className={style.alert} severity={Severity.Clear}>
            请于 30 分钟内完成操作，否则提领将被取消
          </Alert>
          <div className={style.resend}>
            <div>{"没收到验证码？"}</div>
            <Button appearance="text" size="large" onClick={onResend} type="button">
              重新寄送
            </Button>
          </div>
          <div className={style.buttons}>
            <Button appearance="secondary" onClick={onClose} type="button">
              取消
            </Button>
            <Button type="submit">送出</Button>
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default VerifyModal;
